<template>
  <div>
    <div class="module-tree-class">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag">
        </el-tree>
    </div>


  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import { moduleLocationApi,moduleLocationSaveApi,moduleLocationSubmitAllApi } from '@/manager-core/api/module/module'
import {ModuleSelect} from '@/manager-core/component/select'
import {IconSelectGroup} from '@/manager-core/component/selectgroup'


export default defineComponent({
  name: 'ModuleLocation',

  components: {
    ModuleSelect,IconSelectGroup
  },

  data(){
    return {      
      data:[] as any,
      defaultProps: {
        children : 'children',
        label : 'label'
      },
      allowDrop: ()=>{
        return true;
      },
      allowDrag: ()=>{
        return true;
      },
      loading : false      
    }
  },

  methods:{
    init(){
        moduleLocationApi()
          .then((r)=>{
            console.log("edit",r);
            this.data = r;
          })
          .catch((e:any) =>{
            console.log("E",e)
          })
          .finally(()=>{
          this.loading = false;
          })
    },
    handleDragStart(node:any, ev:any) {
    // console.log('drag start', node);
    },
    handleDragEnter(draggingNode:any, dropNode:any, ev:any) {
      // console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode:any, dropNode:any, ev:any) {
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode:any, dropNode:any, ev:any) {
      // console.log('tree drag over: ', dropNode.label);
    },
    handleDrop(draggingNode:any, dropNode:any, dropType:any, ev:any) {
    // console.log('tree drop: ', dropNode.label, dropType);
    },

    // 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
    handleDragEnd(draggingNode:any, dropNode:any, dropType:any, ev:any) {
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      // console.log("dragging node",draggingNode.data.id,draggingNode.data.label);
      // console.log("dropNode node",dropNode.data.id,dropNode.data.label);

      // console.log("draggingNode",draggingNode);
      // console.log("dropNode",dropNode);

      let dragNodeJSON = {
        id : draggingNode.data.id,
        label : draggingNode.label
      }

      let dropNodeJSON = {
        id : dropNode.data.id,
        label : dropNode.label
      }

      let data = {
        dragnode : dragNodeJSON,
        dropnode : dropNodeJSON,
        dropType : dropType
      }

      moduleLocationSaveApi(data)
        .then((r)=>{
          console.log(r);
          ElMessage.success("处理成功。");
        })

      //dropType :  before , after ,inner
    }

  },

  created(){
    this.init();
  },

  mounted(){ 
    console.log("muser")
  },

  setup(){
    const store = useStore()

    return {
      reload:()=> store.dispatch('managercore/menus/reload')
    }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// .module-tree-class{
//   padding-left: 100px;
// }
</style>
